組件

目前為止，我們只使用了單個組件。真正的 Vue 應用往往是由嵌套組件創建的。

父組件可以在模板中渲染另一個組件作為子組件。要使用子組件，我們需要先引入它：

import ChildComp from './ChildComp.vue'

<ChildComp />

實作

<script setup>

</script>

<template>
  <!-- 渲染子組件 -->
</template>

完成

<script setup>
import ChildComp from './ChildComp.vue'
</script>

<template>
  <ChildComp />
</template>

Props

子組件可以通過 props 從父組件接受動態數據。首先，需要聲明它所接受的 props：

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

注意 defineProps() 不需要導入。一旦宣告，msg prop 就可以在子組件的模板中使用。它也可以通過 defineProps() 所返回的對象在 JavaScript 中訪問。

defineProps() 的特點：

• 更簡潔：相比於傳統的 props 定義方式，script setup 模式使代碼更簡潔，無需手動設置 export default。
• 自動推斷類型：如果不用 TypeScript，它也會自動推斷 props 的類型。
• 無需顯式返回：在 script setup 中，定義的變量和函數會自動暴露到模板中，無需手動返回。

父組件可以像聲明 HTML 屬性一樣傳遞 props。若要傳遞動態值，也可以使用 v-bind 語法：

<ChildComp :msg="greeting" />

實作

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp />
</template>

完成

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg="greeting" />
</template>